<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="datare">
                    <div class="ras">维权</div>
                    <div class="ltkbox" v-if="active===1">
                        <div class="ltkbox_b">
                            <div style="width:60px;height:60px;background-color:rgb(200,200,200)"></div>
                            <div class="ltkbox_b_r">
                                <div>真皮百搭女包</div>
                                <p>颜色:<span style="margin-right:20px">黑色</span>尺码:<span>中号</span></p>
                            </div>
                        </div>
                        <el-form :label-position="labelPosition" ref="form" :model="form" label-width="120px">
                            <el-form-item label="买家:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="联系电话:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="订单号:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="成交时间:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="单价:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="商品总价:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="退款编号:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="退款金额:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="退款原因:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="货物状态:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="买家维权说明:">
                                <div class="fangt">
                                    <div style="width:60px;height:60px;background-color:rgb(200,200,200);margin-right:10px"></div>
                                    <div style="width:60px;height:60px;background-color:rgb(200,200,200);margin-right:10px"></div>
                                    <div style="width:60px;height:60px;background-color:rgb(200,200,200);margin-right:10px"></div>
                                </div>
                            </el-form-item>
                            <el-form-item label="买家维权举证:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="商家说明:">
                                <el-input type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="商家举证:">
                                <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="danger" @click="tijiao" style="display:block;margin:0 auto">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="ltkbox" v-if="active===2">
                        <div>买家维权成功！</div>
                        <div>经查证，买家此次维权成立，请您三个工作日内退还买家相关款项。若查证商家拖延退款，平台将以不诚信商家处理！</div>
                        <div class="ltkbox_b">
                            <div style="width:60px;height:60px;background-color:rgb(200,200,200)"></div>
                            <div class="ltkbox_b_r">
                                <div>真皮百搭女包</div>
                                <p>颜色:<span style="margin-right:20px">黑色</span>尺码:<span>中号</span></p>
                            </div>
                        </div>
                        <el-form :label-position="labelPosition" ref="form" :model="form" label-width="120px">
                            <el-form-item label="卖家:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="联系电话:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="订单号:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="成交时间:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="单价:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="商品总价:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="退款编号:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="退款金额:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="退款原因:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="货物状态:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="买家拒绝按照承诺退货:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="买家维权举证:">
                                <div class="fangt">
                                    <div style="width:60px;height:60px;background-color:rgb(200,200,200);margin-right:10px"></div>
                                    <div style="width:60px;height:60px;background-color:rgb(200,200,200);margin-right:10px"></div>
                                    <div style="width:60px;height:60px;background-color:rgb(200,200,200);margin-right:10px"></div>
                                </div>
                            </el-form-item>
                            <el-form-item label="商家说明:">
                                {{form.jine}}
                            </el-form-item>
                            <el-form-item label="商家举证:">
                                <div class="fangt">
                                    <div style="width:60px;height:60px;background-color:rgb(200,200,200);margin-right:10px"></div>
                                    <div style="width:60px;height:60px;background-color:rgb(200,200,200);margin-right:10px"></div>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
export default {
    components: {
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
        labelPosition: 'left',
        form:{
            jine:"这是一个数据"
        },
        imageUrl: '',
        active:1
        
      }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        tijiao(){
            this.active=2
        }
    },
}
</script>
<style scoped>
.el-form-item{
    margin: 0px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: solid 1px rgb(220,220,220);
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.app  /deep/ .el-textarea {
  width: 290px;
}
.demo-ruleForm {
  margin-top: 20px;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}
.ltkbox{
    width: 90%;
    margin:20px auto;
}
.ltkbox_b{
    display: flex;
}
.ltkbox_b_r{
    margin-left: 10px;
    display: flex;
    flex-direction:column;
    justify-content: space-around;
}
.ras{
    font-size: 20px;
    color:rgb(240,96,72);
    border-bottom: solid 1px rgb(220,220,220);
    padding: 10px 0px 10px 20px;
}
.fangt{
    display: flex;
}

</style>